// import styles bundle


import "./scss/theme.scss";

// import * as bootstrap from "../public/vendors/js/bootstrap.bundle";
// import pwa from "../public/assets/js/components/pwa";

import * as THREE from 'three';

document.addEventListener("DOMContentLoaded", () => {

    let panoramaContainer = document.getElementById('vr');

    if (panoramaContainer) {

        let camera, scene, renderer;

        let isUserInteracting = false,
            onPointerDownMouseX = 0, onPointerDownMouseY = 0,
            lon = 0, onPointerDownLon = 0,
            lat = 0, onPointerDownLat = 0,
            phi = 0, theta = 0;

        panorama();

        function panorama() {

            // const panoramaContainer = document.getElementById('vr');
            const panoramaData = panoramaContainer.dataset.panorama;

            camera = new THREE.PerspectiveCamera(67, 2, 0.1, 1000);

            scene = new THREE.Scene();

            const geometry = new THREE.SphereGeometry(1, 32, 16, 1.5);
            // invert the geometry on the x-axis so that all of the faces point inward
            geometry.scale(- 1, 1, 1);

            const texture = new THREE.TextureLoader().load(panoramaData);
            texture.colorSpace = THREE.SRGBColorSpace;
            const material = new THREE.MeshBasicMaterial({ map: texture });

            const mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(parseInt(window.getComputedStyle(panoramaContainer).width), parseInt(window.getComputedStyle(panoramaContainer).height));
            renderer.setAnimationLoop(animate);
            panoramaContainer.appendChild(renderer.domElement);

            panoramaContainer.style.touchAction = 'none';
            panoramaContainer.addEventListener('pointerdown', onPointerDown);

            // document.addEventListener('wheel', onDocumentMouseWheel);

            window.addEventListener('resize', onWindowResize);

        }

        function onWindowResize() {

            camera.aspect = parseInt(window.getComputedStyle(panoramaContainer).width) / parseInt(window.getComputedStyle(panoramaContainer).height);
            camera.updateProjectionMatrix();

            renderer.setSize(parseInt(window.getComputedStyle(panoramaContainer).width), parseInt(window.getComputedStyle(panoramaContainer).height));

        }

        function onPointerDown(event) {

            if (event.isPrimary === false) return;

            isUserInteracting = true;

            onPointerDownMouseX = event.clientX;
            onPointerDownMouseY = event.clientY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;

            document.addEventListener('pointermove', onPointerMove);
            document.addEventListener('pointerup', onPointerUp);

        }

        function onPointerMove(event) {

            if (event.isPrimary === false) return;

            lon = (onPointerDownMouseX - event.clientX) * 0.1 + onPointerDownLon;
            lat = (event.clientY - onPointerDownMouseY) * 0.1 + onPointerDownLat;

        }

        function onPointerUp() {

            if (event.isPrimary === false) return;

            isUserInteracting = false;

            document.removeEventListener('pointermove', onPointerMove);
            document.removeEventListener('pointerup', onPointerUp);

        }

        // function onDocumentMouseWheel(event) {

        //     const fov = camera.fov + event.deltaY * 0.05;

        //     camera.fov = THREE.MathUtils.clamp(fov, 10, 75);

        //     camera.updateProjectionMatrix();

        // }

        function animate() {

            if (isUserInteracting === false) {

                lon += 0.1;

            }

            lat = Math.max(- 85, Math.min(85, lat));
            phi = THREE.MathUtils.degToRad(90 - lat);
            theta = THREE.MathUtils.degToRad(lon);

            const x = 500 * Math.sin(phi) * Math.cos(theta);
            const y = 500 * Math.cos(phi);
            const z = 500 * Math.sin(phi) * Math.sin(theta);

            camera.lookAt(x, y, z);

            renderer.render(scene, camera);

        }
    }
})
